<template>
  <el-container class="teacherCenter">
    <el-header>
      <m-header />
    </el-header>
    <el-main>
      <Menu />
    </el-main>
    <transition enter-active-class="view-in" leave-active-class="view-out">
      <router-view class="view"></router-view>
    </transition>
  </el-container>
</template>

<script>
import { Container, Header, Main } from "element-ui";
import MHeader from "./components/Header";
import Menu from "./components/Menu";
export default {
  components: {
    ElContainer: Container,
    ElHeader: Header,
    ElMain: Main,
    MHeader,
    Menu
  },
  data() {
    return {
      isCollapse: true
    };
  },
  computed: {
    loginStatus() {
      return this.$store.state.login.loginStatus;
    }
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.teacherCenter {
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  .el-header {
    width: 100%;
    height: 50px !important;
    z-index: 5;
    padding: 0;
  }
  .el-main {
    padding: 0;
    box-sizing: border-box;
    color: #333;
    text-align: center;
  }
  .view {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
  }
  .view-in {
    animation: bounce-in 0.3s;
  }
  .view-out {
    animation: bounce-out 0.3s;
  }
}

@keyframes bounce-in {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
@keyframes bounce-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}
</style>
